Border-radius [rounded-]

note -> all = xs, sm, md, lg, xl-4xl,none, full, [value]

using rounded-xs, sm, md, lg, xl-4xl,none, full, [value]

    rounded-2xl in "ol" tag

  1. rounded-s- rounds the start side, start depends on the text direction, english -> left side, arabic rightside
  2. rounded-e- rounds the end side as text direction
  3. rounded-t- rounds the top corners
  4. rounded-r- rounds the right side corners
  5. rounded-l- rounds the left side corners
  6. rounded-b- rounds the bottom side corners
  7. rounded-ss- rounds the bottom side corners
  8. rounded-se- rounds the bottom side corners
  9. rounded-ee- rounds the bottom side corners
  10. rounded-es- rounds the bottom side corners
  11. rounded-tl- rounds the bottom side corners
  12. rounded-tr- rounds the bottom side corners
  13. rounded-bl- rounds the bottom side corners
  14. rounded-br- rounds the bottom side corners
  15. rounded-br-full rounds the bottom side corners

Width [w]

w-xs, sm, md, lg, xl, 2xl, number, fraction, 1-7xl, auto, px, full, screen, 100dvm, 100dvh, -min, -max, -[value]

size-auto, number, fraction, px, full, dvm, dvh, min,max, (same as w)

1. Basic Example of w-number in div tag

w-96 using in div
w-80 using in div
w-64 using in div
w-48 using in div
w-40 using in div
w-32 using in div
w-24 using in div

2. using a percentage in w-full, w-1/3 like in div

w-1/2
w-1/2
w-1/5
w-4/5
w-4/6
w-2/6
w-full

3. using div and w-xl,lg, md,sm,xs, 2xs, 3xs, fixed width based on the container scale

w-xl
w-lg
w-md
w-sm
w-xs
w-2xs
w-3xs

Width using w-number, 0-96 or more

0
1
2
3
4
5
10
20
24
32
64
80
96

Sizing! [size-]

Percentages

w-2/3

w-1/3

Div elements are block-level by default, so they take the full width of their parent container. Here, the width is controlled using Tailwind's w-x/y percentage utilities.

w-1/5
w-2/5
w-5/5 or full
w-1/1 not w-1
This is w-1

Max Width

max-w-[number], fraction, 3xs-xs, sm, md, lg, xl-7xl, none, value_in_px, full, dvw, lvw, lvh, svw, svh, screen, -min, fit

using container as class will make that tag width: 100%

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto ea molestias quae provident magnam pariatur eligendi, illum omnis qui ratione soluta. te debitis perferendis libero explicabo natus, laboriosam deleniti. Quo, iusto. this has max-w-full
max-w-md
max-w-lg
max-w-xl
max-w-2xl

Width of the viewport

(vw) width 100%, by w-screen

w-full

100% of container

using container inside a div class, it takes 100% of any container

Arbitrary Width

w-[300px]

Height (Most of the same options as widths)

h-0 = 0px, h-px = 1px, h-0.5= 2px, h-1 = 4px, h-1,2,3-96, h-auto, 1/2 = 50%, 1/3 like fractions, [value px], svh, svw, min, max, fit, lh

h-96
h-80
h-64
h-48
h-40
h-32
h-24
h-[200px]

Min Height

min-h-[number], min-h-px, fraction, full, screen, dvh, dvw, lvh, lvw, svw, auto, min, max, fit, lh

Using min-h-min

very very very very long text that will be wrap

Using min-h-fit

very very very very long text that will be wrap

min-h-0 and min-w-0

This is a normal div
(default min-height: auto)
p-2 bg-lime-300 flex-1 min-w-0
min-h-0 → allows shrinking inside flex container.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores illo et repellat laborum aliquid explicabo nostrum perferendis accusantium placeat commodi?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eveniet culpa accusamus sunt, suscipit sint omnis incidunt minus ex. Dolores vitae nostrum molestias nobis vel, quod iure excepturi velit corporis possimus voluptatem eligendi dolorum aut repellendus dolor aliquid! Illo repellat reiciendis quod, voluptatem dolores nulla id delectus eos facilis ipsa. Neque cumque pariatur iusto illo officia quas ut qui, modi tenetur? Assumenda corrupti consequatur ipsa voluptatibus, ullam vel adipisci molestiae ea, quia officiis magni in. Similique cum non neque facilis facere repellendus accusantium sequi sit itaque odit sunt adipisci ut corporis voluptas exercitationem magni expedita, quas quae eveniet asperiores modi iusto esse! Molestias nobis similique impedit, adipisci ad rem quibusdam voluptatibus! Repudiandae, quam deleniti. Impedit, quia omnis facere a alias recusandae reiciendis suscipit eveniet, tenetur doloribus nulla nemo! Error, officiis provident nostrum quos consectetur sunt sint sequi. Libero ipsum aliquam sed? Nulla id omnis eius numquam inventore officia odio quia consequuntur ipsa, delectus laudantium voluptatibus quasi. Incidunt fuga suscipit tempora mollitia expedita, reprehenderit natus, libero quaerat et corrupti voluptates nisi exercitationem odio perferendis magni debitis delectus nesciunt at dignissimos illum eligendi porro est quos eveniet. Eius ipsa asperiores tempora sapiente repudiandae non error! Exercitationem, nemo beatae. Iste tempora omnis eaque similique atque? Totam tempore, ea ipsum eius quam vitae aspernatur nemo deserunt labore, minus, veritatis et iste amet recusandae facere reprehenderit aliquam facilis fugit commodi? Nam itaque quia quaerat provident exercitationem beatae earum accusantium porro at facere et laborum, pariatur explicabo, consequatur laboriosam voluptatum veritatis maxime iure eius reprehenderit. Neque nam optio officia porro velit perferendis suscipit nobis voluptates temporibus eos, laboriosam non iusto odio quis mollitia animi natus modi aliquam, esse error quam ipsa! Illum necessitatibus ratione excepturi, atque fugit culpa. Suscipit, earum ex tempore officiis voluptatibus id. Illo omnis harum architecto ex maiores dicta exercitationem ratione ducimus iusto similique praesentium et earum incidunt explicabo placeat quidem, esse hic repellendus officiis eveniet voluptate! In molestiae minus corrupti quos veniam quam unde porro quis sunt labore quod veritatis voluptatum facere voluptatibus, tempore explicabo ducimus natus odit totam sapiente. Neque consequatur quo deserunt saepe iure, fugit a temporibus, nam reiciendis rerum accusantium? Sequi porro rem totam iste dignissimos, impedit libero voluptates illo nulla odio placeat atque. Autem nostrum molestias quod sed harum explicabo dolorem totam fugit ea numquam natus ducimus maiores ratione magnam, eveniet consequatur error ab aliquid nisi doloremque, id quo! Enim at in repellendus voluptas. Dicta natus dignissimos atque.
min-h-full, so its minimum height becomes 100% of the parent’s content area. Even though the parent has padding, the inner div still stretches to fill the available height inside it.

Max Height

Using max-h-full

parent container has h-[160px], and this div has h-48 = 192px, but using max-h-full, this is taking full height of the parent container, also thid div has mx-20

Full screen height

min-h-screen

Width Auto

it will take auto screen or parent container width, w-auto